<template>
  <div class="store-home">
    <div class="store-info-index">
      <!--分类搜索框-->
      <div class="detail-searchbox">
        <div class="left-sort" @click="showClassify">
          <i class="logo"></i>
          <span>分类</span>
        </div>
        <div class="search-container store-search-container">
          <div class="search-wrapper">
            <div class="icon" @click="searchList">
               <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
            </div>
            <input
              @confirm="searchList"
              v-model="keyword"
              type="text"
              :placeholder="tplData.has_duodian?'请输入商品、店铺名称':'请输入商品关键字'"
            />
          </div>
        </div>
      </div>
      <!--门店信息-->
      <div class="info-basic">
        <!-- href="{:U('Shop/storeList/id/'.$id)}" -->
        <div class="store-con">
          <div class="store-logo" @click="JumpName('storeList',{id:id})">
            <img :src="storeDataInfo.imgdir" alt v-if="storeDataInfo.imgdir" />
            <img src="https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg" alt v-else />
          </div>
          <div class="store-name" @click="JumpName('storeList',{id:id})">
            <p>{{storeDataInfo.shop_name}}</p>
          </div>
          <div class="store-scan">
            <i class="qr-code" @click="showCode"></i>
          </div>
        </div>
        <!-- <input type="hidden" name="storeId" class="storeId" value="{$info.self_address_id}" /> -->
      </div>
    </div>
    <!-- <div style="display: none;">{$random_content}</div> -->

    <!-- 自定义装修数据 -->
    <div class="diy-store-bg" :style="{'background-color':backgroundColor}">
      <div class="diy-store-index" :class="hasMargin==1?'':'no-margin'">
        <van-list v-model="loading"
                    :finished="finished"
                    :error.sync="error"
                    error-text="请求失败，点击重新加载"
                    finished-text=""
                    @load="onLoad">
          <diy-tpl :tplData="tplData"></diy-tpl>
        </van-list>
      </div>
    </div>

    <!-- 二维码弹窗 -->
    <van-popup v-model="is_show_qrcode" class="code-pop">
      <img :src="qrcode_url" alt />
    </van-popup>

	  <section class="paneltab-overlay-close" v-show="isShowClassify" @click="showClassify"></section>
    <section class="panel-left-tab" :class="isShowClassify?'panel-left-in':''">
      <h2><i class="sort-left-ico"></i>全部分类</h2>
      <div class="overflow-list">
        <ul class="first-classify">
          <li v-for="(lev1,index1) in class_lists" :key="index1" @click.stop="clickShowChild(lev1)">
            <a href="javascript:;" @click="openLink(lev1.link)" v-if="lev1.link"><b class="ico right"></b>{{lev1.class_name}}</a>
            <a href="javascript:;" v-else><b class="ico right" :class="lev1.showChild?'bottom':''"></b>{{lev1.class_name}}</a>
            <ul class="second-classify" v-if="lev1.child && lev1.child.length" v-show="lev1.showChild">
              <li v-for="(lev2,index2) in lev1.child" :key="index2" @click.stop="clickShowChild(lev2)">
                <a href="javascript:;" @click="openLink(lev2.link)" v-if="lev2.link"><b class="ico right"></b>{{lev2.class_name}}</a>
                <a href="javascript:;" v-else><b class="ico right" :class="lev2.showChild?'bottom':''"></b>{{lev2.class_name}}</a>
                <ul class="third-classify" v-if="lev2.child" v-show="lev2.showChild">
                  <li v-for="(lev3,index3) in lev2.child" :key="index3">
                    <a href="javascript:;" @click="openLink(lev3.link)" v-if="lev3.link"><b class="ico right"></b>{{lev3.class_name}}</a>
                    <a href="javascript:;" v-else><b class="ico right"></b>{{lev3.class_name}}</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </section>
    
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
import diyTpl from '../index/shopTpl/index'
import ShopCode from '@/components/ShopCode'
import { openPage } from '@/utils/utils'
import { storeIndex, storeDiyHtml, storeQrCode } from '@/api/shop/index'
import Vue from 'vue'
import small from '@/smallapp/small'
import { mpShare } from '@/utils/utils'
import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
export default Vue.extend({
  components: {
    diyTpl,
    ShopCode,
    SmallLogin
  },
  data() {
    return {
      is_show_qrcode: false,
      isShowClassify: false,
      qrcode_url: '',
      id: '',
      keyword: '',
      storeData: {},
      storeDataInfo: {},
      class_lists: [],
      hasMargin: 0,
      backgroundColor: '',
      tplData: [],
      loading: false,
      finished: false,
      error: false,
      p: 2
    }
  },
  computed: {},
  created() {
    // 获取加载的页面栈
    let pages = getCurrentPages() || [];
    // 获取当前页面的对象
    let currentPage = pages[pages.length - 1];
    // 获取当前页面的路径
    let currentUrl = currentPage.route;
    // 获取当前url上携带的参数
    let options = currentPage.options;
    this.id = this.$route.query.id || options.id
    this.init()
    this.getStoreDiyHtml()
  },
  methods: {
    openLink(link){
      openPage(link)
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },

    init() {
      storeIndex({ id: this.id }).then(res => {
        if (res.status == 1) {
          this.storeData = res.data
          this.storeDataInfo = res.data.info
          this.class_lists = res.data.class_lists
          const link = encodeURIComponent(this.storeDataInfo.link)
          // this.qrcode_url = '/Public/logoCode?storeId=' + this.storeDataInfo.self_address_id + '&link=' + link
          console.log(this.qrcode_url)
          const option = {
            title: '门店店铺',
            shareParam: '',
          }
          const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : 0
          const sid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').shop_id : 0
          // console.log(small.wxCache('global_login_info'), 'small', `/link/pages/liveList/index?sid=${sid}&pid=${pid}`)
          
          mpShare (true, false, `/goods/pages/storeIndex/index?sid=${sid}&pid=${pid}&id=${this.id}`, option, '')
        }
      })
      // 获取门店太阳码
      storeQrCode({id: this.id }).then(res => {
        if (res.status == 1) {
          const { data } = res
          this.qrcode_url = data && data.qrcode_url
        }
      })
    },

    getStoreDiyHtml() {
      storeDiyHtml({ id: this.id, p: 1 }).then(res => {
        if (res.status == 1) {
          const resData = res.data
          this.hasMargin = resData.hasMargin
          this.backgroundColor = resData.backgroundColor
          this.tplData = resData._diyHtml
        }
      })
    },

    // 首页装修组件加载更多
    onLoad() {
      const data = {
        p: this.p,
        id: this.id
      }
      storeDiyHtml(data)
        .then(res => {
          if (res.status == 1) {
            this.loading = false
            const resData = res.data
            if (resData._diyHtml && resData._diyHtml.length) {
              this.tplData = this.tplData.concat(resData._diyHtml)
              this.p++
            } else {
              this.finished = true
            }
          }
        })
        .catch(() => {
          this.error = true
        })
    },

    searchList() {
      this.$JumpName(this, 'item-list', { title: this.keyword })
    },
    // 门店二维码
    showCode() {
      this.is_show_qrcode = true
    },
    // 显示左侧分类
    showClassify() {
      this.isShowClassify = !this.isShowClassify
    },
    // 显示二级子分类
    clickShowChild(item) {
      // console.log(333)
      // console.log(item)
      if (item.showChild) {
        this.$set(item, 'showChild', false)
      } else {
        this.$set(item, 'showChild', true)
      }
      return false
    },
    // 显示三级子分类
    showChildThird(item) {

    }
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })

    window.addEventListener('wxload', query => {
      small.HandleShareParams()
    })

    window.addEventListener('wxshow', () => {
      // console.log('onshow')
      if(!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
      }
    })
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.store-home {
  .store-search-container{
    flex:1;
    padding:16px 30px 16px 20px;
    .search-wrapper {
      position:relative;
      width: 100%;
      height: 72px;
      line-height: 72px;
      border-radius: 72px;
      font-size: 0;
      background: #fff;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding: 0 20px;
      .icon {
        margin-right: 10px;
        height:32px;
        &.miniprogram {
          line-height: initial;
          top:20px;
        }
        .icon_search, .img_search{
          width:32px;
          height:32px;
        }
      }
      @include placeColor(#999);
      input {
        display: inline-block;
        width: 100%;
        line-height: 40px;
        height: 40px;
        font-size: 28px;
        // margin-top: 13px;
        // padding: 0 70px;
        border: 0;
        background: transparent;
      }
    }
  }
  .store-info-index {
    background: #fff;
    margin-bottom: 5px;
    .detail-searchbox {
      display:flex;
      background: #f44336;
      .left-sort {
        display:flex;
        align-items:center;
        width:180px;
        color: #fff;
        font-size: 0;
        line-height: 92px;
        .logo {
          display: inline-block;
          width: 44px;
          height: 42px;
          background: url(https://img.wifenxiao.com/h5-wfx/images/shop/storeIndex/classify_w.png) no-repeat;
          background-size: 100%;
          vertical-align: middle;
          margin: 8px 20px 0 30px;
        }
        span{
          font-size:28px;
        }
      }
    }
    .info-basic {
      width: 100%;
      overflow: hidden;
      .store-con {
        display:flex;
        align-items: center;
        height: 150px;
        padding:0 20px;
        overflow: hidden;
        color: #333;
        .store-logo {
          width:100px;
          height:100px;
          img {
            display:block;
            width:100%;
          }
        }
        .store-name {
          flex:1;
          margin-left:20px;
          p {
            font-size: 32px;
          }
        }
      }
      .store-scan {
        .qr-code {
          display:block;
          height: 56px;
          width: 56px;
          margin-right:20px;
          background: url(https://img.wifenxiao.com/h5-wfx/images/shop/storeIndex/qr_code.png) center no-repeat;
          background-size: contain;
        }
      }
    }
  }
  .diy-store-index{
    margin:0 20px;
    &.no-margin{
      margin:0;
    }
  }
  .code-pop{
    width:600px;
    height:600px;
    padding:60px;
    border-radius:20px;
    background:#fff;
    img{
      display:block;
      width:100%;
    }
  }

  /* .store_layover {
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    z-index: 101;
    top: 0;
    left: 0;
    text-align: center;
    display: none;
    font-size: 100px;
    .store_box {
      width: 2.25em;
      height: 2.5em;
      top: 50%;
      position: relative;
      left: 50%;
      margin-left: -1.125em;
      margin-top: -1.25em;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
      .layover_close {
        position: absolute;
        top: -0.2em;
        right: -0.2em;
        width: 0.4em;
        height: 0.4em;
        background: #fff;
        border-radius: 0.2em;
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.4);
        img {
          width: 40%;
          height: 40%;
        }
      }
      .tit {
        background: #f3f4f3;
        color: #ff4b0c;
        height: 0.4em;
        line-height: 0.4em;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        h3 {
          font-size: 0.16em;
        }
      }
      .p2 {
        color: #888;
        margin-top: 0.6em;
        font-size: 0.14em;
        // font-family: Simsun;
      }
      .thumb {
        position: absolute;
        width: 0.4em;
        bottom: 0.2em;
        right: 0.15em;
      }
      .wh_bg {
        width: 1.1em;
        height: 1.1em;
        padding: 0.36em 0 0.05em;
        background: #fff;
        display: block;
        margin: 0 auto;
        img {
          width: 100%;
          vertical-align: top;
        }
      }
    }
  } */

  .panel-left-tab{
    // display: none;
    background: rgba(0,0,0,0.8);
    position:fixed;
    left: 0;
    top: 0;
    width: 376px;
    height: 100%;
    transition: all 0.2s linear 0s;
    transform: translate3d(-100%, 0, 0);
    z-index: 13;
    &.panel-left-in{
      transform: translate3d(0, 0, 0);
    }
    h2{
      color: #fff;
      text-align: center;
      height: 80px;
      line-height: 80px;
      border-bottom:solid 2px #eee;
      font-size:28px;
      .sort-left-ico{
        display: inline-block;
        width: 40px;
        height: 40px;
        background:url(https://img.wifenxiao.com/h5-wfx/images/shop/storeIndex/sort-left.png) no-repeat;
        background-size:100%;
        vertical-align: middle;
        margin-right: 16px;
      }
    }
    .overflow-list{
      height:90%;
      overflow-y: scroll;
    }
    .overflow-list>ul.first-classify{
      padding: 12px 20px;
      a{
        color:#fff;
        display: block;
        font-size: 28px;
      }
      li{
        line-height: 60px;
        .ico{
          display: inline-block;
          background-size:100%;
          background-repeat:no-repeat;
          vertical-align: middle;
          width: 34px;
          height: 34px;
          margin-right: 4px;
          &.right{
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/shop/storeIndex/show_right.png);
          }
          &.bottom{
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/shop/storeIndex/show_bottom.png);
          }
        }
      }
      ul{
        margin-left: 30px;
        // display: none;
        &.third-classify{
          margin-left: 60px;
          // display: none;
        }
      }
    }
  }
  .paneltab-overlay-close {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
  }

  .is_fixed_top {
    border-bottom: 2px solid #f2f2f3;
  }
}
</style>
<style lang="scss">
.diy-store-index{
  .tpl19-head{
    position:relative;
  }
}
</style>
